<template>
  <div class="a">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      style="border-bottom: 0px"
      @select="handleSelect"
    >
      <el-menu-item index="" style="margin-top: 10px; border-bottom: none">
        <img
          @click="$router.push('/')"
          class="poco_logo"
          src="http://static-c.pocoimg.cn/project/poco_new_pc/prod/online/image/widget/poco_header/i/black-logo_b0fae42.png"
          alt=""
        />
      </el-menu-item>
      <el-submenu index="1" style="margin-top: 10px; border-bottom: none">
        <template #title>作品</template>
        <el-menu-item index="1-1">技巧</el-menu-item>
        <el-menu-item index="1-2">极限摄影</el-menu-item>
      </el-submenu>
      <el-submenu index="2" style="margin-top: 10px">
        <template #title>社区</template>
        <el-menu-item index="2-1">好友动态</el-menu-item>
        <el-menu-item index="2-2">摄影师</el-menu-item>
      </el-submenu>
      <el-menu-item index="3" style="margin-top: 10px; border-bottom: 0px"
        >活动</el-menu-item
      >
      <el-menu-item index="4" style="margin-top: 10px; border-bottom: 0px"
        >排行榜</el-menu-item
      >
      <el-menu-item index="5" style="margin-top: 10px; border-bottom: 0px"
        >下载APP</el-menu-item
      >
      <el-submenu index="6" style="margin-top: 5px; margin-left: 400px">
        <template #title>
          <el-row class="demo-avatar demo-basic">
            <el-col :span="12">
              <div class="demo-basic--circle">
                <div class="block">
                  <el-avatar :size="50" :src="user.user_image"></el-avatar>
                </div>
              </div>
            </el-col>
          </el-row>
        </template>
        <el-menu-item index="6-1" @click="$router.push('/works')"
          >个人中心</el-menu-item
        >
        <el-menu-item index="6-2" @click="$router.push('/change')"
          >设置</el-menu-item
        >
        <el-menu-item index="6-2">退出登录</el-menu-item>
      </el-submenu>
      <el-submenu index="7" style="margin-top: 5px">
        <template #title
          ><el-button type="success" @click="q">发布</el-button></template
        >
        <el-menu-item index="7-1">作品</el-menu-item>
        <el-menu-item index="7-2">博文</el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
import { getUser } from "@/network/user.js";
export default {
  components: {},
  data() {
    return {
      activeIndex: "1",
      activeIndex2: "1",
      user: {
        user_image:
          "http://pic3.pocoimg.cn/image/poco/avatar/31/20000/200005008_1573551944_68558.jpg?imageView2/1/w/120/h/120/q/95",
      },
    };
  },
  methods: {
    q() {
      console.log(this.user.user_id);
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
  },
  mounted() {
    getUser(1).then((res) => {
      this.user = res.data;
    });
  },
};
</script>

<style scoped lang = 'less'>
el-menu-item {
  border-bottom: 0px;
}
.a {
  min-width: 1400px;
  background-color: aliceblue;
  width: 100%;
  height: 70px;
  /deep/.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
    border-bottom: 2px solid #67c23a;
  }
  /deep/.el-submenu__icon-arrow::before{
    content: "";
  }
  .poco_logo {
    width: 120px;
    margin-left: 150px;
  }
  .touxiang {
    margin-top: 7px;
    margin-left: 400px;
  }
  .poco_issue {
    margin: 7px;
  }
}
</style>
